<template>
  <div style="width:100%">
    <div v-if="formType == 'add'" :value="modelValue">
      <FileUpLoad @onChange="addOnChange" :action="props.action"></FileUpLoad>
    </div>
    <div v-if="formType == 'edit'" style="width:100%">
      <div class="orgfile_warp" v-if="state.orgFile.length">
        <div class="edit_orgfile" v-for="(item, index) in state.orgFile" :key="index">
          <template v-if="item">
          </template>
          <a :href="item.url" target="_blank">{{ item.attachName }}</a>
          <el-icon @click="deleteOrgFile(item, index)">
            <Close />
          </el-icon>
        </div>
      </div>
      <FileUpLoad @onChange="editOnChange" :action="props.action"></FileUpLoad>
    </div>
    <div v-if="formType == 'show'">
      <template v-for="(item, index) in state.orgFile" :key="index">
        <a :href="item.url || item.attachUrl" target="_blank">{{ item.attachName }}</a>
      </template>
    </div>
  </div>
</template>

<script setup>
import { watchEffect, reactive, onMounted } from 'vue'
import FileUpLoad from '_c/fileUpload/fileUpload.vue'
import { Close } from '@element-plus/icons'
import { ElMessageBox } from 'element-plus'
const state = reactive({
  orgFile: [],
  firstLoad: true
})
const props = defineProps({
  modelValue: {
    type: [Array],
    default() {
      return []
    }
  },
  action: {
    type: String,
  },
  formType: {
    type: String,
    default() {
      return 'add'
    }
  }
})
const emit = defineEmits(['update:modelValue', 'change'])
// 
const deleteOrgFile = (info, index) => {
  ElMessageBox.confirm(`确定移除当前文件？`).then(() => {
    state.orgFile.splice(index, 1)
  })
}
const editOnChange = (file) => {
  if (file instanceof Array && file.length) {
    let res = file.concat(state.orgFile)
    emit('update:modelValue', res)
    emit('change', res)
  }
}
const addOnChange = (file) => {
  if (file.length) {
    emit('update:modelValue', file)
    emit('change', file)
  }
}
onMounted(() => {
})
watchEffect(() => {
  if (props.formType == 'edit' && props.modelValue.length) {
    let res = props.modelValue.filter((item) => !item.uid)
    state.orgFile = res
  } else if (props.formType == 'show' && props.modelValue.length) {
    let res = props.modelValue.filter((item) => !item.uid)
    state.orgFile = res
  }
});

</script>

<style lang="scss" scoped>
.orgfile_warp {
  padding-bottom: 10px;

  ::v-deep(.el-icon) {
    line-height: 28px;
    margin-left: 10px;
    height: auto;
    cursor: pointer;
    display: inline-block;

    &:hover {
      color: var(--el-color-primary);
    }
  }
}

.orgfile {
  line-height: 25px;
  padding: 0 20px;
}

.edit_orgfile {
  line-height: 25px;
}
</style>